<!--
 * @Author: 王灿
 * @Date: 2019-12-23 21:57:47
 * @LastEditTime : 2019-12-23 22:41:49
 * @LastEditors  : Please set LastEditors
 * @Description: 课程门票
 * @FilePath: \scarlet-sparrow-admin\src\views\course\course-ticket\index.vue
 -->
<template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" />
    <!-- 课程核销 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 校验码 -->
        <el-table-column prop="checkCode" label="校验码"></el-table-column>
        <!-- 课程门票状态 -->
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.status === 0 ? '未核销' : '已核销' }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button @click="onUseTicket(scope.$index)" type="text" size="small" v-if="scope.row.status === 0">核销</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 核销 -->
    <el-dialog title="门票核销" :visible.sync="isShow" :close-on-click-modal="false" width="600px">
      <ticket-operate
        :tableData="tableData"
        :index="index"
        :isShow="isShow"
        @onChangeRefresh="onChangeRefresh"
      />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import TicketOperate from './ticket-operate/index'
import { getCourseTicketList } from '@/api/course.js'
export default {
  name: 'CourseTicket',
  components: {
    JqTitle,
    JqTooltip,
    JqPage,
    TicketOperate
  },
  data() {
    return {
      title: { label: '课程门票', flag: false, searchFlag: false },
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      // 分页总数
      total: 0,
      // 刷新页面开关
      isRefresh: false,
      // 核销
      isShow: false,
      tabTitle: '门票核销',
      index: 0
    }
  },
  created() {
    this.onGetCourseTicketList()
  },
  watch: {
    // 刷新标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetCourseTicketList()
      }
    }
  },
  methods: {
    // 课程门票列表
    onGetCourseTicketList() {
      getCourseTicketList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 页码变化
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
      this.isRefresh = true
    },
    // 门票核销
    onUseTicket(index) {
      this.index = index
      this.isShow = true
      this.isRefresh = false
    },
    // 刷新标记
    onChangeRefresh(data) {
      this.isShow = data.isShow
      this.isRefresh = data.isRefresh
    }
  }
}
</script>

<style lang="scss">

</style>